<script>
export default {
  data() {
    return {
      isExpanded: false,
      /* searchQuery: '',
       selectedOption: 'all',
       options: [
         { text: '所有', value: 'all' },
         { text: '选项1', value: 'option1' },
         { text: '选项2', value: 'option2' },
         { text: '选项3', value: 'option3' },
       ],*/
    };
  },
  /*  computed: {
      filteredOptions() {
        if (this.searchQuery === '') {
          return this.options;
        } else {
          return this.options.filter(option => option.text.includes(this.searchQuery));
        }
      },
    },*/
};

</script>

<template>
  <!--内容区域-->
  <div class="content">
    <div class="container">
      <h1>欢迎来到西窗映画</h1>
      <h3>这是一段测试文本,仅用于测试使用,xxxx</h3>

      <div class="search-box">

        <!--        下拉框-->
        <!--        <select v-model="selectedOption" class="dropdown">-->
        <!--          <option v-for="option in filteredOptions" :value="option.value" :key="option.value">-->
        <!--            {{ option.text }}-->
        <!--          </option>-->
        <!--        </select>-->

        <input
          type="text"
          placeholder="搜索..."
          :class="{ expanded: isExpanded }"
          @focus="isExpanded = true"
          @blur="isExpanded = false"
        />

        <button :class="{ 'expanded': isExpanded }"
                @click="isExpanded = !isExpanded">
          {{ isExpanded ? '收起' : '搜索' }}
        </button>
      </div>

      <span>->></span>

    </div>
  </div>

  <!--  视频背景-->
  <div class="video">
    <video src="@/assets/video/[1080p 60FPS]《崩坏3》动画短片「因你而在的故事」.mp4" muted loop autoplay></video>
  </div>

  <!--  品牌logo-->
  <div class="logo">
    <p>西窗映画</p>
  </div>

  <!--  菜单按钮-->
  <!--  <div class="toggle"></div>-->
</template>

<style scoped lang="scss">
/*搜索框*/
// input和button对不齐是因为行内元素的基线是不同的，所以会导致高低不同，添加vertical-align:middle;即可。
.search-box {
  position: relative; /* 为阴影效果设置相对定位 */
}

.search-box input {
  transition: width 0.5s;
  width: 0; /* 默认宽度 */
  height: 49px;
  vertical-align: middle;
  border-radius: 5px 0 0 5px; /* 添加圆角 */
  background: rgba(255, 255, 255, 0.5); /* 半透明背景 */
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
  border: none; /* 去除边框 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  text-indent: 10px; /* 文字缩进 */
  color: #ffffff; /* 设置文字颜色为白色 */
}

.search-box input.expanded {
  width: 400px; /* 展开后的宽度 */
  height: 51px;
  border-radius: 5px 0 0 5px; /* 展开后的圆角 */
}

.search-box button {
  margin-left: 0;
  height: 50px;
  width: 100px;
  vertical-align: middle;
  border-radius: 5px; /* 四边都有圆角 */
  background: $stgColor; /* 半透明背景 */
  color: #fff;
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
  border: none; /* 去除边框 */
  outline: none; /* 去除聚焦边框 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.search-box button.expanded {
  border-radius: 0 5px 5px 0; /* 展开后的圆角 */
}

//.dropdown {
//  margin-left: 10px; /* 在搜索框和下拉框之间添加间距 */
//  height: 49px; /* 与搜索框高度保持一致 */
//  border-radius: 5px 0 0 5px; /* 添加圆角 */
//  background: rgba(255, 255, 255, 0.5); /* 半透明背景 */
//  backdrop-filter: blur(10px); /* 毛玻璃效果 */
//  border: none; /* 去除边框 */
//  outline: none; /* 去除聚焦边框 */
//  color: #ffffff; /* 设置文字颜色为白色 */
//  /* 其他样式 */
//}
//
//.dropdown::before {
//  content: "";
//  position: absolute;
//  right: 10px;
//  top: 50%;
//  transform: translateY(-50%);
//  border-left: 5px solid transparent;
//  border-right: 5px solid transparent;
//  border-bottom: 5px solid #ffffff;
//  width: 0;
//  height: 0;
//}
//
//.dropdown option {
//  color: #333; /* 设置选项文字颜色 */
//}


//内容区域
.content {
  color: white;
  width: 100vw;
  height: 95vh;
  display: flex;
  align-items: center;
}

.container {
  width: 80%;
  margin: 0 auto;
  line-height: 1.8;
}
.container h1 {
  width:38%;
  font-size: 50px;
  font-weight: 400;
}

.container h3 {
  width: 60%;
  font-size: 38px;
  font-weight: 400;
}

.container p {
  width: 60%;
  padding-top: 10px;
  font-size: 18px;
}

.container span {
  font-size: 40px;
  color: white;
  font-weight: 400;
  display: block;
  margin-top: 40px;
  position: relative;
  top: 0;
  animation: move 1s infinite;
}

@keyframes move {
  0% {
    top: 0;
  }

  50% {
    top: 20px;
  }

  100% {
    top: 0;
  }
}

.video {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

//网站logo
.logo {
  position: absolute;
  top: 20px;
  left: 50px;
}

.logo p {
  font-family: 霞鹜文楷,serif;
  font-size: 32px;
  color: $stgColor;
}

/*菜单按钮*/
.toggle {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 50px;
  //background: rgba(56, 186, 183, 0.8) url("@/assets/img") no-repeat center;
  background-size: 50%;
  border-radius: 3px;
}

</style>
